<template>
  <div class="box">
    <header>
      <span class="iconfont icon-xialia-jiantou-copy" @click="returns"></span>
      全新省心优惠
    </header>
    <div class="top">
      <img src="./img/youhui_yemian (3).jpg" alt="" />
    </div>
    <div class="choujiang">
      <p>
        <i>天天抽奖 好礼不停</i>
        <b>参与有机会赢100元/5元/1元商城红包,米金</b>
        <strong>立即参与</strong>
      </p>
      <img src="./img/f6eee.jpg" alt="" />
    </div>
    <h2>
      <img src="./img/youhui_yemian (1).jpg" alt="" />
    </h2>
    <div class="commodity" v-for="(phones,index) in phone" :key="index">
      <img
        :src="phones.img"
        alt=""
      />
      <div class="right">
        <p class="right-top">
          <i>{{phones.name}}</i>
          <b class="name-xiaomi">1月1日-1月15日 领劵立减200元</b>
        </p>
        <p class="right-buttom">
          <i>
            <img src="./img/youhui_yemian (2).jpg" alt="" />
            ¥<span class="jiage">{{phones.price}}</span>起
            <span class="yuan-jia">¥{{phones.prices}}起</span>
          </i>
          <b class="gou-mai">立即购买</b>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {

  name: "WorryPreferential",
  components: {},
  data() {
    return {
      phone: []
    };
  },
  created() {
    axios({
      url: "/newphone",
    }).then((res) => {
      this.phone = res.data;
      console.log(this.phone);
    });
  },
  methods: {
    returns() {
      this.$router.back(); //fanhui
    },
  },
};
</script>

<style scoped>
@import url(../gonggongwenjian/xiaomi-iconfont/iconfont.css);
header {
  height: 0.4rem;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  line-height: 0.4rem;
  text-align: center;
  /* display: none; */
}
header .iconfont {
  position: fixed;
  top: 0;
  left: 0.05rem;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #edc5a5;
}
.top {
  height: 2.15rem;
  width: 100%;
}
.top img {
  height: 100%;
  width: 100%;
}
.choujiang {
  height: 0.85rem;
  width: 3.55rem;
  margin: 0.1rem auto;
  border-radius: 0.1rem;
  background-color: #f6eee0;
  display: flex;
  align-items: center;
  position: relative;
}
.choujiang p {
  margin-left: 0.28rem;
  display: flex;
  flex-direction: column;
  height: 0.63rem;
  justify-content: space-between;
}
.choujiang p i {
  color: #be5000;
}
.choujiang p b {
  font-size: 0.1rem;
  color: #be5000;
}
.choujiang p strong {
  width: 0.63rem;
  height: 0.2rem;
  color: #fff;
  font-size: 0.12rem;
  border-radius: 0.1rem;
  line-height: 0.2rem;
  text-align: center;
  background-color: #fb4b4c;
}
.choujiang img {
  height: 0.65rem;
  position: absolute;
  top: 0.1rem;
  right: 0.22rem;
}

/* ===================== */
h2 {
  height: 0.5rem;
  width: 3.55rem;
  margin: 0 auto;
  display: flex;
}
h2 img {
  height: 0.16rem;
  margin: auto;
}
/* ============== */
.commodity {
  height: 1.4rem;
  width: 3.55rem;
  background-color: #fff;
  border-radius: 0.05rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 0.1rem;
}
.commodity img {
  height: 1rem;
}
.commodity .right {
  height: 1rem;
  width: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.commodity .right p {
  display: flex;
  flex-direction: column;
}
.commodity .right p img {
  display: inline;
  height: 0.14rem;
}
.commodity .right p i {
  font-size: 0.14rem;
}
.commodity .right p i .jiage {
  font-size: 0.16rem;
}
.name-xiaomi {
  color: #ff3a02;
  font-size: 0.12rem;
}
.gou-mai {
  width: 100%;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  border-radius: 0.15rem;
  background-color: #ff3a02;
  color: #fff;
}
.yuan-jia {
  color: #a8a8a8;
  text-decoration: line-through;
}
</style>